import '@ant-design/compatible/assets/index.css';
import React, { useState, useEffect } from 'react';
import { Modal, Button, Checkbox, message } from 'antd';
import { exportCostbookdetail } from '../service';
import styles from './index.less';
import moment from 'moment';

const CustomExportData = props => {

  const { customExportModalVisible, onCancel, columns, searchParams } = props;

  // 按钮loading
  const [btnLoading, handleBtnLoading] = useState(false)
  // 选中数据数组
  const [checkedList, handleCheckedList] = useState([])
  // 列表
  let listData = []
  columns.forEach(item => {
    if (!item.hideInTable) {
      listData.push(item.dataIndex)
    }
  })

  // 切换全选/全不选
  const checkedGroup = (flag) => {
    if (flag === '1') {
      handleCheckedList(listData)
    } else if (flag === '2') {
      handleCheckedList([])
    }
  }

  // 确认导出
  const sure = () => {
    if (checkedList.length === 0) {
      message.error('您未选择任何字段')
      return false
    } else {
      handleBtnLoading(true)
      const hide = message.loading('正在导出');
      let res = exportCostbookdetail({ ...searchParams, columnFiledNames: checkedList }).then(res => {
        let blob = new Blob([res], {
          type: 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        })
        let elink = document.createElement('a')
        let time = moment(Date.now()).format('YYYY-MM-DD HH_mm_ss')
        elink.download = '异常行李成本分析报表列表' + time + '.xls'
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        document.body.removeChild(elink)
        hide();
        message.success('导出成功');
        handleBtnLoading(false)
        handleCheckedList([])
        onCancel()
      }).catch(err => {
        handleBtnLoading(false)
        console.log(err)
      });
    }
  }

  useEffect(() => {
    checkedGroup('1')
  }, [customExportModalVisible])

  return (
    <Modal
      destroyOnClose={true}
      title="自定义导出"
      visible={customExportModalVisible}
      onCancel={() => onCancel()}
      className={styles.customExportModal}
      width={700}
      centered={true}
      footer={null}
    >
      <div className={styles.formTitle}>提示：选中字段点击【确认】后将进行下载，未选择字段不做下载。</div>
      <div className={styles.checkTitle}>
        <Button onClick={() => { checkedGroup('1') }} type={checkedList.length === listData.length ? 'primary' : 'default'}>全选</Button>
        <Button onClick={() => { checkedGroup('2') }} type={checkedList.length === 0 ? 'primary' : 'default'}>全不选</Button>
      </div>
      <Checkbox.Group className={styles.checkboxItem} value={checkedList} onChange={(value) => {
        handleCheckedList(value)
      }}>
        {
          columns.map(item => {
            return item.hideInTable === true
              ? ''
              : <Checkbox value={item.dataIndex} key={item.dataIndex}>{item.title}</Checkbox>
          })
        }
      </Checkbox.Group>
      <div style={{ textAlign: 'center', padding: '20px 0' }}>
        <Button type='primary' loading={btnLoading} onClick={() => sure()}>确定</Button>
        <Button style={{ marginLeft: '20px' }} type='default' loading={btnLoading} onClick={onCancel}>取消</Button>
      </div>
    </Modal>
  )
}

export default CustomExportData